<template>
  <div
    :class="navLayout === 'left' ? 'right-content' : 'right-content-top-menu'"
  >
    <avatar-dropdown
      :menu="showMenu"
      :current-user="currentUser"
      :navLayout="navLayout"
      :theme="theme"
    />
  </div>
</template>

<script>
import AvatarDropdown from "./AvatarDropdown";
import storage from "store";

export default {
  name: "RightContent",
  components: {
    AvatarDropdown
  },
  props: {
    prefixCls: {
      type: String,
      default: "ant-pro-global-header-index-action"
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    },
    navLayout: {
      type: String,
      default: "left"
    }
  },
  data() {
    return {
      showMenu: true,
      currentUser: {}
    };
  },
  computed: {},
  mounted() {
    setTimeout(() => {
      // const name = this.$store.getters.nickname
      const name = storage.get("userName");
      this.currentUser = {
        // name: 'Serati Ma'
        name: name
      };
    }, 1000);
  }
};
</script>

<style>
.right-content:hover {
  background: #dfe6e9;
}
.right-content-top-menu:hover {
  background: #fd79a8;
}
</style>
